<template>
  <h2>当前x值：{{ x }}</h2>
  <button @click="x++">x自增</button>
  <br />
  <h2>当前y值：{{ y.num }}</h2>
  <button @click="y.num++">y.num自增</button>
  <button @click="y = { num: 888 }">替换整个y</button>
  <br />
  <h2>客户姓名：{{ arr }}</h2>
  <button @click="arr[0] = '王五'">修改客户姓名</button>
  <hr />
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>职业：{{ job.j1.type }}</h2>
  <h2>薪资：{{ job.j1.salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">修改年龄</button>
  <button @click="job.j1.salary++">加薪</button>
</template>
<script>
import { ref, reactive, shallowRef, shallowReactive, toRefs } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    /* 
    shallowReactive()：浅层次的reactive()
    区别：
    reactive() 会处理对象中所有层次的响应式数据
    shallowReactive() 只会处理对象中第一层的响应式数据
    */
    let person = shallowReactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          type: "前端",
          salary: 10,
        },
      },
    });

    const arr = shallowRef(["张三", "李四"]);

    /* 
    shallowRef()：浅层次的ref()
    区别：
    ref() 如果内部传入一个对象，则会在内部默认转为reactive()为对象提供响应式
    shallowRef() 在内部是基本数据类型情况下和 ref() 无异，当如果内部是对象、数组类型，
      不会转为 reactive() 来提供响应式
    */
    let x = shallowRef(0);
    let y = shallowRef({
      num: 0,
    });

    // 返回一个对象供模版使用
    return {
      x,
      y,
      arr,
      ...toRefs(person),
    };
  },
};
</script>

